<template>
  <div class="app-container">
    
    
    <div class="filter-container">
      <!--用户名搜索   @keyup.enter.native="handleFilter" 表示按回车进行搜索 handleFilter是搜索方法 -->
      <el-input
        v-model="search.SearchItem.ow_name"
        placeholder="货主名称"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="search.SearchItem.ow_tel"
        placeholder="手机号"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="search.SearchItem.ow_validity"
        placeholder="驾驶证有效期"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      />
    
      <!--搜索按钮 icon="el-icon-search" 代表按钮要显示的小图标    @click="handleFilter" 代表点击执行搜索方法 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>

      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>

    </div>


    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="用户搜索加载"
      border
      fit
      highlight-current-row
    >
      <!--el-table-column 代表1列 -->
      <!--slot-scope="scope"  vue插槽  参看 https://www.jianshu.com/p/981d37be0307  -->
      <!--{{ scope.row.user_name }} 表示该列绑定数据的 user_name列 -->
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column align="center" label="货主名称">
        <template slot-scope="scope">
          {{ scope.row.ow_name }}
        </template>
      </el-table-column>
     
      <el-table-column align="center" label="手机号" >
        <template slot-scope="scope">
         {{ scope.row.ow_tel }}
        </template>
      </el-table-column>

       <el-table-column align="center" label="单位">
        <template slot-scope="scope">
          {{ scope.row.ow_source }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="联系地址">
        <template slot-scope="scope">
          {{ scope.row.ow_address }}
        </template>
      </el-table-column>
      
       <el-table-column align="center" label="驾照有效期">
        <template slot-scope="scope">
          {{ scope.row.ow_validity }}
        </template>
      </el-table-column>
       <el-table-column align="center" label="驾照照片">
        <template slot-scope="scope">
         
           <img
            :src="scope.row.ow_photo_allurl "
            width="50px"
            height="50px"
          >
        </template>
      </el-table-column>
       <el-table-column align="center" label="备注">
        <template slot-scope="scope">
          {{ scope.row.ow_remark }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.ow_createtime }}</span>
        </template>
      </el-table-column>
      

      
      <el-table-column 
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <!--修改按钮 -->
        <!-- slot-scope="{ row, $index }"   row代表数据按钮对应的行,  index代表当前行的下标-->
        <template slot-scope="{ row, $index }">
          <!-- @click="handleUpdate(row)  点击按钮执行handleUpdate方法,  row:当前行对应的数据-->
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页插件-->
    <!--分页是自定义插件  由代码import Pagination from "@/components/Pagination"; 来引入 在下面有引入的代码   -->
    <!--分页插件在下面的 default的 components: { Pagination } 进行引入 代码大约在第160行附近 -->
    <!--v-show="total > 0"  总行数大于0的时候显示分页-->
    <!--:total="total"  总行数绑定total字段-->
    <!--:page.sync="search.page" 绑定当前页字段-->
    <!--:page.sync="search.page" 绑定页长度-->
    <!-- @pagination="searchPageList"   点击分页执行的方法-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.limit"
      @pagination="searchPageList"
    />
    <!--弹出层-->
    <!--:visible.sync="dialogFormVisible"  是否显示弹出层  dialogFormVisible变量在下面有定义-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!--表单定义-->
      <!-- ref="adminUserForm"   表单命名,类似于以前的id-->
      <!--:rules="rules"   对应的验证规则, rules 验证规则json 下面有定义-->
      <!--:model="adminUserInfo"   表单绑定的数据模型-->
      <el-form
        ref="adminUserForm"
        :rules="rules"
        :model="OwnerInfo"
        label-position="left"
        :inline="true"
      >
        <!--el-row  代表一行-->
        <!--货主名称-->
        <el-row>
          <!--:span="12" 代表占一半的地方-->

          <el-col :span="12">
            <!--::rules="this.dialogStatus === '1' ? rules.user_name : []"   表示添加的时候才验证用户名是否已经被占用-->
            <el-form-item
              label="货主名称"
              prop="ow_name"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
               
                v-model="OwnerInfo.ow_name"
              />
              <!-- v-else  vue 的else  和上面的if判断对应-->
             
            </el-form-item>
          </el-col>
        </el-row>
         <!--手机号-->
       <el-row>
          <el-col :span="12">
           <el-form-item
              label="手机号"
              prop="ow_tel"
            >
              <el-input
                v-model="OwnerInfo.ow_tel"
              />
            </el-form-item>
          </el-col>
        </el-row>
          <!--单位名称-->
         <el-row>
          <el-col :span="12">
           <el-form-item
              label="单位名称"
              prop="ow_source"
            >
              <el-input
                v-model="OwnerInfo.ow_source"
              />
            </el-form-item>
          </el-col>
        </el-row>
          <!--联系地址-->
         <el-row>
          <el-col :span="12">
           <el-form-item
              label="联系地址"
              prop="ow_address"
            >
              <el-input
                v-model="OwnerInfo.ow_address"
              />

            </el-form-item>
          </el-col>
        </el-row>
           <!--驾驶证有效期-->
        <el-row>
          <el-col :span="12">
           <el-form-item
              label="驾驶证有效期"
              prop="ow_validity"
            >
              <el-date-picker type="date" placeholder="选择日期" v-model="OwnerInfo.ow_validity" style="width: 100%;"></el-date-picker>
        
            </el-form-item>
          </el-col>
        </el-row>

 <!--备注-->
         <el-row>
          <el-col :span="12">
           <el-form-item
              label="备注"
              prop="ow_remark"
            >
              <el-input
                v-model="OwnerInfo.ow_remark"
              />

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
            <el-form-item label="用户头像" prop="user_photo">
              <!-- el-upload  element ui 的图片上传组件 -->
              <!-- :action="imageUpLoadAction"  imageUpLoadAction存放的上传图片的api的url地址   -->
              <!--  name="fileList"  向图片上传接口提交图片数据时候的参数名   -->
              <!-- :headers="imageUpLoadHeaders"  代表调用上传图片api地址的header设置,主要把token放在header中  -->
              <!--  :before-upload="userPhotoHandleSuccess"  上传图片成功后的回调方法  -->
              <!--  :before-upload="userPhotoBeforeAvatarUpload"  验证图片格式和大小  -->
              <el-upload
                class="avatar-uploader"
                :action="imageUpLoadAction"
                name="fileList"
                :headers="imageUpLoadHeaders"
                :on-success="userPhotoHandleSuccess"
                :show-file-list="false"
                :before-upload="userPhotoBeforeAvatarUpload"
              >
                <!--  adminUserInfo.user_photo_all_url  图片完全地址  -->
                <img
                  v-if="OwnerInfo.ow_photo_allurl"
                  style="width:40%;height:40%"
                  :src="OwnerInfo.ow_photo_allurl"
                  class="avatar"
                >
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
       


      </el-form>
       <!-- 添加按钮-->
      <div slot="footer" class="dialog-footer">
        <!-- dialogStatus === '1' 是添加 就执行添加的方法  是修改  就执行修改的方法-->
        <el-button
          type="primary"
          @click="dialogStatus === '1' ? addUser() : updateData()"
        >
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetOwnerList,OwnerAdd,DelOwnerById,GetOwnerById,OwnerUpdate } from '@/api/Owner/owner' // 引入api
import Pagination from '@/components/Pagination' // 引入分页
import { getToken } from '@/utils/auth' // 引入提取token的方法
const statusOptions = [
  // 申明状态常量
  { key: '1', value: '有效' },
  { key: '0', value: '无效' }
]
// 将statusOptions转换为json对象 { 1 : "有效", 2 : "无效" }
const statusOptionsKeyValue = statusOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.value
  return acc
}, {})
export default {
  name: 'ShipperManager',
  components: { Pagination },
  filters: {
    // vue的过滤器
    statusFilter(status) {
      //    状态过滤器 用于根据状态返回对应的文本描述
      return statusOptionsKeyValue[status]
    },
    imageUrlFilter(url) { // 头像显示过滤器
      return process.env.VUE_APP_BASE_API + url
    },
    formatDate(time) {
    var date = new Date(time);
    return formatDate(date, "yyyy-MM-dd");
    }
  },
  data() {
    // 验证密码
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.adminUserInfo.vpass_word !== '') {
          this.$refs.adminUserForm.validateField('vpass_word')
        }
        callback()
      }
    }
    // 验证验证密码
    var validateVPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.adminUserInfo.pass_word) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    // 验证输入用户名是否有效(是否在数据库中存在)
    var userName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        validateUserName(value).then((response) => {
          console.log('response.data' + response.data)
          if (response.data) {
            callback()
          } else {
            callback(new Error('输入用户名已经被占用'))
          }
        })
      }
    }
    // 基础model配置
    return {
      list: null,
      listLoading: true,
      total: 0,
      search: {
        page: 1,
        limit: 10,
        OrderBy: 'ow_id',
        SearchItem: {}
      },
      imageUpLoadAction: process.env.VUE_APP_File_Upload_API, // 上传文件路径
      imageUpLoadHeaders: {
        'X-Token': getToken() // 从cookie里获取token，并赋值  X-Token ，而不是token
      },
      statusOptions, // 状态集合  这种写法 其实和 statusOptions:statusOptions 是一样的
      dialogFormVisible: false, // 是否显示弹出层
      dialogTitle: '', // 弹出层标题
      dialogStatus: '1', // 等于1 表示是添加操作   不等于1 表示修改操作
      //userRoleSelectLoading: false, // 角色搜索下拉框,搜索时的加载特效
      //userRoleSelectOptions: [], // 角色下拉列表的选项
     
      OwnerInfo: {
        ow_id: 0,
        ow_name: '',
        ow_tel: '',
        ow_source: '',
        ow_address: '',
        ow_validity: new Date(),
        ow_photo: '',
        ow_photo_allurl:'',
        ow_remark: 1,
        ow_createtime:new Date(),
        
      },
      adminUserForm:{
        ow_id: 0,
        ow_name: '',
        ow_tel: '',
        ow_source: '',
        ow_address: '',
        ow_validity: new Date(),
        ow_photo_allurl:'',
        ow_photo: '',
        ow_remark: 1,
        ow_createtime:new Date(),
      },
      rules: {
        // 验证配置
        // 验证
        user_name: [
          { required: true, message: '用户名必须输入', trigger: 'change' }, // 验证是否为空
          { validator: userName, trigger: 'blur' } // 自定义验证, 验证用户名是否存在
        ],
        user_full_name: [
          { required: true, message: '姓名必须输入', trigger: 'change' }
        ],
        pass_word: [
          { required: true, message: '密码必须输入', trigger: 'change' },
          { validator: validatePass, trigger: 'blur' }
        ],
        vpass_word: [
          { required: true, message: '验证密码必须输入', trigger: 'change' },
          { validator: validateVPass, trigger: 'blur' }
        ],
        roleSelectValue: [
          { required: true, message: '必须选择用户角色', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.searchPageList()
  },
  methods: {
     // 搜索方法
    searchPageList() {
     
      this.listLoading = true // 显示加载效果
      GetOwnerList(this.search).then((response) => {
        // 调用分页接口
        this.list = response.data.data // 将查询结果赋值给list
        this.listLoading = false // 隐藏加载效果
        this.total = response.data.recordsTotal // 赋值总行数
      })
    },
    // 点击搜索
    handleFilter() {
      
      // 搜索方法
      this.search.page = 1 // 将当前页设置为第一页
      this.searchPageList() // 调用搜索分页方法
    },
    // 角色搜索方法
    roleSearch(key) {
      this.userRoleSelectLoading = true
      const roleSearchObj = {
        page: 1,
        limit: 1000,
        OrderBy: 'role_name',
        SearchItem: { role_name: key }
      }
      getRolePage(roleSearchObj).then((response) => {
        if (response.code === 20000) {
          this.userRoleSelectLoading = false
          this.userRoleSelectOptions = response.data.data
        }
      })
    }, // 初始化用户对象
    resetUserinfo() {
      this.OwnerInfo={
        ow_id: 0,
        ow_name: '',
        ow_tel: '',
        ow_source: '',
        ow_address: '',
        ow_validity: new Date(),
        ow_photo: '',
        ow_remark: '',
        ow_createtime:new Date(),
        
      }
    },
    // 弹出添加页面
    handleCreate() {
      
      this.resetUserinfo()
      this.dialogStatus = '1' // 等于1 表示是添加操作   不等于1 表示修改操作
      this.dialogTitle = '添加'
      this.dialogFormVisible = true // 当等于true  弹出层显示
      this.$nextTick(() => {
        this.$refs['adminUserForm'].clearValidate() // 清理验证
      })
    },
    // 添加用户方法
    addUser() { 
      this.$refs['adminUserForm'].validate((valid) => {
        if (valid) {
          OwnerAdd(this.OwnerInfo).then((response) => {
            // this.list.unshift(response.data)
            //  this.total++;
            this.dialogFormVisible = false
            this.searchPageList()
            this.$notify({
              title: '添加成功',
              message: '添加用户成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 修改弹出层
    handleUpdate(row) {
      
      GetOwnerById(row.ow_id).then((r) => {
        if (r.code === 20000) {
          // this.$forceUpdate(); //vue 可能因为对象层次多不进行渲染, 调用该方法
          this.OwnerInfo = r.data // 把调用接口返回来的用户数据 赋值给adminUserInfo
          this.dialogStatus = '2' // 代表是修改
          this.dialogFormVisible = true // 显示弹出层
          this.$nextTick(() => {
            this.$refs['adminUserForm'].clearValidate()
          })
          this.$forceUpdate() // vue 可能因为对象层次多不进行渲染, 调用该方法
        }
      })
      // copy obj
    },
    // 修改方法
    updateData() {
      this.$refs['adminUserForm'].validate((valid) => {
        if (valid) {
          OwnerUpdate(this.OwnerInfo).then((response) => {
            this.dialogFormVisible = false
            this.searchPageList()
            this.$notify({
              title: '修改成功',
              message: '修改用户成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    //删除方法
     handleDelete(row, $index) {
       if(confirm("确定要删除吗?"))
      {
         if (row.ow_id>0) {
         
        DelOwnerById(row.ow_id).then((response) => {
          this.searchPageList()
          this.dialogFormVisible = false
          this.$notify({
            title: '删除成功',
            message: '删除用户成功',
            type: 'success',
            duration: 2000
          })
        })
      }
      }
      },
    // 图片上传成功后调用的方法
    userPhotoHandleSuccess(response, file) {
      // 上传头像
      if (response.code === 20000) {
        this.$forceUpdate() // vue 可能因为对象层次多不进行渲染, 调用该方法
        this.OwnerInfo.ow_photo = response.data[0].fileNewPath

        this.OwnerInfo.ow_photo_allurl =
          'https://localhost:44361/' + response.data[0].fileNewPath
      }
    },
    // 验证图片格式的方法
    userPhotoBeforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style >
.search_input{
  width: 200px
}
</style>
